<template>
	<view class="login">
		<view class="title">
			签收家
		</view>
		<!-- <view class="textH">
			电子货单
		</view> -->
		<uni-forms ref="form" :modelValue="formData" label-width="80px" :rules="rules">
			<uni-forms-item label="手机号" name="userName">
				<input type="number" v-model="formData.userName" placeholder="请输入手机号" />
			</uni-forms-item>
			<p></p>
			<uni-forms-item label="密码" name="password">
				<input type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
			<p></p>

			<button type="primary" @click="login">登 录</button>
			<view class="flexBox">
				<view>
					<checkbox-group @change="rememberPass">
						<label>
							<checkbox value="pass" :checked="remember" />记住密码
						</label>
					</checkbox-group>
				</view>
				<text @click="toPassword">忘记密码</text>
			</view>

			<view v-show="!showCode" class="flexBox" style="margin-bottom: 40rpx;">
				<checkbox-group @change="changeAgree">
					<label>
						<checkbox value="a" :checked="agree" />
						我已阅读并同意
					</label>
					<text @click="openAgreement" style="color: #b051ff">《用户服务协议》、</text>
					<text @click="openUse" style="color: #b051ff;">《隐私政策》</text>
				</checkbox-group>
				<!-- <text @click="openAgreement" style="color: #b051ff">《用户服务协议》、</text> 
				<text @click="openUse" style="color: #b051ff">隐私政策</text> -->
			</view>
		</uni-forms>
		<!-- <view class="funArea">
			<text @click="toRegister">没有账号? 立即注册</text>
		</view> -->
		<view class="funArea" style="display: flex;flex-direction: column;">
			<text @click="toRegister">没有账号? 立即注册</text>
			<!-- 	<text v-show="!isWeixinLogin" @click="otherLogin" style="margin-top: 20rpx;color: royalblue;"> <text
					style="border-bottom: 1px solid #587EF2 ;">使用其它账号登录</text> </text>
			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :show="isWeixinLogin">
				<view class="" v-show="isWeixinLogin" style="padding-top: 30rpx;" @click="wecartChangeLogin">
					<image style="width: 15%;height:100rpx" src="../../static/weixin.png" mode=""></image>
				</view>
			</uni-transition> -->
		</view>
	</view>
</template>

<script>
	import {
		regPhone
	} from '../../utils/regExp.js'
	export default {
		data() {
			return {
				isWeixinLogin: false,
				modeClass: 'slide-right',
				showCode: false,
				remember: true,
				agree: true, // 是否同意条款
				formData: {
					userName: '',
					password: ''
				},
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请填写手机号',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (!regPhone.test(value)) return callback('手机号格式错误')
								return true
							}
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请填写密码',
						}]
					},
				},
				weixinAuthService: {}
			}
		},
		onLoad() {
			if (!uni.getStorageSync('agree')) this.agree = false
			let pass = uni.getStorageSync('pass')
			if (pass) {
				this.formData = pass
				this.loginApi()
			}
		},
		methods: {
			otherLogin() {
				this.isWeixinLogin = !this.isWeixinLogin
			},
			openAgreement() {
				uni.navigateTo({
					url: '/pages/user/customerPage?Type=1'
				})
			},
			openUse() {
				uni.navigateTo({
					url: '/pages/webview/Use'
				})
			},
			changeAgree(e) {
				if (e.detail.value.length > 0) this.agree = true
				else this.agree = false
			},
			rememberPass(e) {
				if (e.detail.value.length > 0) this.remember = true
				else this.remember = false
			},
			// 注册
			toRegister() {
				uni.navigateTo({
					url: '/pages/Login/Register'
				})
			},
			//忘记密码
			toPassword() {
				uni.navigateTo({
					url: '/pages/Login/Password'
				})
			},
			// 登陆
			login() {
				if (!this.agree) {
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意使用条款后进行登录'
					})
					return
				}
				this.$refs.form.validate().then(res => {
					this.loginApi()
				}).catch(err => {
					console.log(err);
				})
			},
			loginApi() {
				uni.showLoading()
				this.$http('post', '/Base_Manage/Home/SubmitLogin', this.formData).then(res => {
					uni.hideLoading()
					if (res.Success) {
						if (this.remember) {
							uni.setStorageSync('pass', this.formData)
						}
						uni.setStorageSync('agree', true)
						uni.setStorage({
							data: 'Bearer ' + res.Data,
							key: 'token',
							success: () => {
								this.op()
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})
			},
			// 用户信息
			op() {
				this.$http('post', '/Base_Manage/Home/GetOperatorInfo').then(res => {
					if (res.Success) {
						uni.setStorageSync('userInfo', res.Data.UserInfo)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		margin-top: 40rpx;
		text-align: center;
		color: #a6a6a6;
		font-size: 15px;
		margin-left: 20px;
	}

	.login {
		padding: 40rpx;
		width: 100%;
		height: 100%;
		background: url('@/static/bj.jpg') no-repeat center center fixed;
		background-size: cover;
		box-sizing: border-box;

		.flexBox {
			margin-top: 40rpx;
			box-sizing: border-box;
			padding: 10rpx 40rpx;
			display: flex;
			justify-content: space-between;
		}

		.title {
			text-align: center;
			font-size: 70rpx;
			font-weight: bolder;
			color: #fff;
			margin-top: 30rpx;
			margin-bottom: 3%;
			line-height: 4;
		}

		.textH {
			text-align: center;
			font-size: 40rpx;
			font-weight: 500;
			color: #fff;
			margin-bottom: 90rpx;
		}

		.uni-forms {
			background-color: #fff;
			display: flexbox;
			border-radius: 17px;
			padding: 20px 0;
		}

		.uni-forms-item {
			color: #000;
			padding: 10rpx 20rpx 10rpx 33rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
		}

		::v-deep.uni-forms-item__label {
			display: flex;
			flex-direction: row;
			align-items: center;
			text-align: left;
			font-size: 16px;
			font-weight: bold;
			color: #7d8084;
			height: 36px;
			padding: 0 12px 0 0;
			vertical-align: middle;
			flex-shrink: 0;
			box-sizing: border-box;
		}

		::v-deep.uni-forms-item__error {
			color: #f56c6c;
			font-size: 12px;
			line-height: 2.9;
		}


		p {
			border-bottom: 1px solid #d5d5d5;
			width: 92%;
			margin: 0 auto;
			margin-bottom: 5%;
			margin-top: -2%;
		}

		h6 {
			text-align: right;
			font-size: 15px;
			font-weight: bold;
			color: #6d7073;
			padding: 0 60rpx;

		}

		button {
			width: 90%;
			border-radius: 100rpx;
			font-size: 20px;
			font-weight: bold;
			margin-top: 40rpx;
			background: linear-gradient(to left, #972ae7, #687bf1);

		}

		.funArea {
			margin-top: 65rpx;
			text-align: center;
			color: #fff;
			font-size: 15px;
			font-weight: bold;
		}
	}
</style>